<template>
	<div id="app">
		<el-container>
			<el-header height="50px">
				<i class="el-icon-s-help"></i>
				<span>ERP管理系统</span>

				<el-tooltip class="item" effect="dark" content="关于系统" placement="bottom-start">
					<el-button type="info" icon="el-icon-warning-outline" circle></el-button>
				</el-tooltip>
				<el-popover placement="down" width="400" height="600" trigger="click">



					<el-button class="item" slot="reference" type="primary" icon="el-icon-user" circle></el-button>
				</el-popover>
				<el-tooltip class="item" effect="dark" content="最新消息提示" placement="bottom-start">
					<el-button type="warning" icon="el-icon-s-comment" circle></el-button>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="代办事项" placement="bottom-start">
					<el-button type="warning" icon="el-icon-date" circle></el-button>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="快捷查询" placement="bottom-start">
					<el-button icon="el-icon-search" circle></el-button>
				</el-tooltip>
			</el-header>

			<el-container>
				<el-col :span="3">
					<el-menu default-active="0" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" @open="handleOpen"
					 @close="handleClose">
						<el-menu-item index="0">
							<i class="el-icon-star-off"></i>
							<span>首页</span>
						</el-menu-item>
						<el-submenu index="1">
							<template slot="title">
								<i class="el-icon-s-grid"></i>
								<span>报表查询</span>
							</template>
							<el-menu-item-group>
								<el-submenu index="1-1">
									<template slot="title">采购报表</template>
									<el-menu-item index="1-1-1">订货明细表</el-menu-item>
									<el-menu-item index="1-1-1">订货统计表</el-menu-item>
									<el-menu-item index="1-1-1">进货明细表</el-menu-item>
									<el-menu-item index="1-1-1">采购统计表</el-menu-item>
								</el-submenu>
								<el-submenu index="1-2">
									<template slot="title">销售报表</template>
									<el-menu-item index="1-1-1">订货明细表</el-menu-item>
									<el-menu-item index="1-1-1">订货统计表</el-menu-item>
									<el-menu-item index="1-1-1">进货明细表</el-menu-item>
									<el-menu-item index="1-1-1">采购统计表</el-menu-item>
								</el-submenu>
								<el-submenu index="1-3">
									<template slot="title">库存报表</template>
									<el-menu-item index="1-1-1">订货明细表</el-menu-item>
									<el-menu-item index="1-1-1">订货统计表</el-menu-item>
									<el-menu-item index="1-1-1">进货明细表</el-menu-item>
									<el-menu-item index="1-1-1">采购统计表</el-menu-item>
								</el-submenu>
								<el-submenu index="1-4">
									<template slot="title">财务表报</template>
									<el-menu-item index="1-1-1">订货明细表</el-menu-item>
									<el-menu-item index="1-1-1">订货统计表</el-menu-item>
									<el-menu-item index="1-1-1">进货明细表</el-menu-item>
									<el-menu-item index="1-1-1">采购统计表</el-menu-item>
								</el-submenu>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title">
								<i class="el-icon-coin"></i>
								<span>财务管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="2-1">收款单</el-menu-item>
								<el-menu-item index="2-2">付款单</el-menu-item>
								<el-menu-item index="2-3">其他应收单</el-menu-item>
								<el-menu-item index="2-4">其他应付单</el-menu-item>
								<el-menu-item index="2-5">采购销售费用清单</el-menu-item>
								<el-menu-item index="2-6">费用支出清单</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<el-menu-item index="3">
							<i class="el-icon-shopping-cart-full"></i>
							<span slot="title">采购管理</span>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="el-icon-goods"></i>
							<span slot="title">库存管理</span>
						</el-menu-item>
						<el-submenu index="5">
							<template slot="title">
								<i class="el-icon-suitcase"></i>
								<span>销售管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="5-1">
									<router-link to="cus">
										客户列表
									</router-link>
								</el-menu-item>
								<el-menu-item index="5-2">
									<router-link to="saleorder">
										销售订单
									</router-link>
								</el-menu-item>
								<el-menu-item index="5-3">销售单</el-menu-item>
								<el-menu-item index="5-4">退货单</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<el-menu-item index="6">
							<i class="el-icon-user"></i>
							<span slot="title">人事管理</span>
						</el-menu-item>
					</el-menu>
				</el-col>
				<el-main >
					<router-view />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'App',
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style>
	body,
	ul,
	li,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	form,
	dl,
	dt,
	dd {
		margin: 0px;
		padding: 0px;
		font-weight: normal;
		font-family: "Hiragino Sans GB";
	}

	ul {
		list-style: none;
	}

	.el-header {
		background-color: #333333;
		color: aliceblue;
		line-height: 45px;
		font-size: 20px;

	}

	.el-aside {
		background-color: white;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: antiquewhite;
		color: #333;
		padding: 0px;
	}

	.el-button {
		float: right;
	}

	.item {
		margin: 4px;
	}
</style>
